<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom :isAppBtn="false"></HeadCustom>
		<view class="wrap">
			<view class="title font46 font-weight">{{config[pageType].title}}</view>
			<view class="tips mt16 font32 font-w300">{{config[pageType].tips}}</view>
			<view class="mt32">
				<view class="fboxWrap">
				<textarea class="u-textarea bg-21242C font30" :adjust-position="false" v-model="content" placeholder="请输入" maxlength="1000"
					placeholder-style="color:#98979C" />
				</view>
				<template v-if="pageType == 'advantage' || pageType == 'jobDesc'">
					<view class="tit font32 mt32">{{config[pageType].tagTit}}：</view>
					<view class="tags fboxWrap">
						<view class="tag font-ell1 fboxRow Ycenter Xcenter bg-border-btn" v-for="(item, index) in tagsList"
							:key="index" @click="delTag(index)">
							{{item}}
							<view class="icon-del fboxRow Ycenter Xcenter">
								<u-icon name="close-circle" color="#DCAF79" size="24rpx"></u-icon>
							</view>
						</view>
						<view class="add-tag tag fboxRow Ycenter Xcenter font26 bg-linear" @click="addTag"
							v-if="tagsList.length < config[pageType].maxTag"><u-icon name="plus" color="#fff"
								size="24rpx"></u-icon><text style="margin-left: 6rpx;">添加</text></view>
					</view>
				</template>
				<!-- 简历关键词 -->
				<u-popup class="tagPopup" :show="isTag" :round="10" mode="center" @close="isTag = false">
					<view class="box">
						<view class="close" @click="isTag = false"><u-icon name="close" size="20"></u-icon></view>
						<view class="hd">
							<view class="color-E8CDA7 font30 lh44">添加{{config[pageType].tagTit}}</view>
							<view class="tips mt16 color-ACB4C7 lh38 font26">最多添加{{config[pageType].maxTag}}项</view>
						</view>
						<view class="bd mt40">
							<input class="uni-input" type="text" v-model="tagText" placeholder="请输入" maxlength="12" />
						</view>
						<view class="ft mt40 fboxRow Xend">
							<view class="btn border-E8CDA7 color-E8CDA7 font26 fboxRow Ycenter Xcenter"
								@click="isTag = false">取消</view>
							<view class="btn bg-linear color-141720 font26 fboxRow Ycenter Xcenter" @click="enterTag">确定
							</view>
						</view>
					</view>
				</u-popup>
				<ModelPublic class="tagPopup" ref="modelRef" :title="'添加'+config[pageType].tagTit"  @confirm="enterTag">
					<template #msg>
						<view class="box flex1">
							<view class="tips color-ACB4C7 lh38 font26">最多添加{{config[pageType].maxTag}}项</view>
							<view class="bd mt40">
								<input class="uni-input" type="text" v-model="tagText" placeholder="请输入" maxlength="12" />
							</view>
						</view>
					</template>
				</ModelPublic>
			</view>
		</view>
		<view class="fixed-space"></view>
		<view class="fixed-btn fboxRow Ycenter Xcenter bg-1A1D25">
			<view class="btn flex1 fboxRow Ycenter Xcenter font30 color-141720 bg-linear" @click="save">保存</view>
		</view>
	</view>
</template>

<script>
	import {
		resumeSetting
	} from '@/api/recruit.js';
	import {
		recruitMixins
	} from '../common/recruit.mixins.js';
	import ModelPublic from '@/components/model-public/index.vue'
	export default {
		mixins: [recruitMixins],
		components: {ModelPublic},
		data() {
			return {
				theme: getApp().globalData.appTheme,
						globalColor: getApp().globalData.globalColor,
				detail: {
					advantage: '',
					resumeKeywordList: [],
				},
				config: {
					advantage: {
						title: '我的优势',
						tips: '一句话介绍自己，突出自己的核心优势',
						tagTit: '简历亮点关键词',
						maxTag: 5
					},
					jobContent: {
						title: '工作内容',
						tips: '可以简短介绍公司与自己负责的任务，分条描述自己实施的措施及对应的业绩。',
					},
					projectDescription: {
						title: '项目描述',
						tips: '介绍在上面项目中自己负责的内容，列出通过什么动作或技能达到了什么成功',
					},
					jobDesc: {
						title: '职位描述',
						tips: '介绍工作内容、职位要求、加分项',
						tagTit: '职位关键词',
						maxTag: 10
					}
				},
				pageType: 'projectDescription',
				isTag: false,
				tagText: '',
				content: '',
				tagsList: [],
				index: ''
			}
		},
		onLoad(option) {
			if (option && option.pageType) {
				this.pageType = option.pageType
			}
			if (option && option.index) {
				this.index = option.index
			}
			this.getInit()
			this.datePicker = new Date(this.detail.birthday).getTime()
		},
		methods: {
			getInit() {
				const vitaTemp = getApp().globalData.vitaTemp
				const workExperience = getApp().globalData.workExperience
				const projectExperience = getApp().globalData.projectExperience
				const recruitmentTemp = getApp().globalData.recruitmentTemp
				if (this.pageType == 'advantage') {
					this.tagsList = vitaTemp.resumeKeywordList || []
					this.content = vitaTemp.advantage || ''
				} else if (this.pageType == 'jobContent') {
					this.content = workExperience.jobContent || ''
				} else if (this.pageType == 'projectDescription') {
					this.content = projectExperience.projectDescription || ''
				} else if (this.pageType == 'jobDesc') {
					this.tagsList = recruitmentTemp.jobKeywordList || []
					this.content = recruitmentTemp.jobDesc || ''
				}
			},
			delTag(index) {
				this.tagsList.splice(index, 1)
			},
			addTag() {
				// this.isTag = true
				this.$refs.modelRef.show = true
				this.tagText = ''
			},
			enterTag() {
				if (this.tagText) {
					this.tagsList.push(this.tagText)
					this.$refs.modelRef.show = false
				} else {
					uni.showToast({
						icon: 'none',
						title: '请输入关键词'
					})
				}
			},
			save() {
				const vitaTemp = getApp().globalData.vitaTemp
				const workExperience = getApp().globalData.workExperience
				const projectExperience = getApp().globalData.projectExperience
				const recruitmentTemp = getApp().globalData.recruitmentTemp
				if (this.pageType == 'advantage') {
					vitaTemp.advantage = this.content
					vitaTemp.resumeKeywordList = this.tagsList
					this.postSave(vitaTemp, 'back', 1)
				} else if (this.pageType == 'jobContent') {
					workExperience.jobContent = this.content
					uni.navigateBack({
						delta: 1
					})
				} else if (this.pageType == 'projectDescription') {
					projectExperience.projectDescription = this.content
					uni.navigateBack({
						delta: 1
					})
				} else if (this.pageType == 'jobDesc') {
					recruitmentTemp.jobDesc = this.content
					recruitmentTemp.jobKeywordList = this.tagsList
					uni.navigateBack({
						delta: 1
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-wrap {
		min-height: calc(100vh);
	}
	.title { line-height: 66rpx; color:var(--contourButtonTextColor) }
	.tips { line-height: 44rpx; color: var(--contentFontLightColor) }
	.tit{color:var(--contentFontDarkColor);}

	.wrap {
		padding: 40rpx;
	}

	.u-textarea {
		padding: 32rpx;
		line-height: 44rpx;
		width: 100%;
		height: 387rpx;
		// height: 794rpx;
		border-radius: 12rpx;
	}

	.tags {padding: 16rpx 0;}

	.tags .tag {
		position: relative;
		margin: 16rpx 16rpx 16rpx 0;
		padding: 0 56rpx 0 12rpx;
		height: 56rpx;
		line-height: 56rpx;
		border-radius: 8rpx;
		// border: 1px solid #6B707C;
	}
	.icon-del{position: absolute;right: 12rpx;top: 0;height: 56rpx; line-height: 56rpx;text-align: center;}

	.tags .add-tag { padding-right: 12rpx; }

	.tagPopup /deep/ .content{
		margin-top: 0;
	}
	.uni-input {
		padding: 0 32rpx;
		height: 88rpx;
		background: #F4F8FB;
		border-radius: 12rpx;
	}

	.tagPopup .ft .btn {
		width: 160rpx;
		height: 56rpx;
		border-radius: 8rpx
	}

	.tagPopup .ft .btn+.btn {
		margin-left: 24rpx;
	}

	.expect-wrap {
		padding-top: 64rpx;
	}

	.expect-item .line {
		margin: 40rpx 0;
		height: 1rpx;
		background: var(--backgroundDivisionColor);
	}



	.fixed-space {
		height: 142rpx;
	}

	.fixed-btn {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		padding: 24rpx 0 66rpx;
		height: 166rpx;
	}

	.fixed-btn .btn {
		margin: 0 24rpx;
		width: 570rpx;
		height: 76rpx;
		border-radius: 12rpx;
	}
</style>